<h3>Slider configuration</h3>

<section class="example-section">
  <md-input-container class="example-margin">
    <input mdInput type="number" placeholder="Value" [(ngModel)]="value">
  </md-input-container>
  <md-input-container class="example-margin">
    <input mdInput type="number" placeholder="Min value" [(ngModel)]="min">
  </md-input-container>
  <md-input-container class="example-margin">
    <input mdInput type="number" placeholder="Max value" [(ngModel)]="max">
  </md-input-container>
  <md-input-container class="example-margin">
    <input mdInput type="number" placeholder="Step size" [(ngModel)]="step">
  </md-input-container>
</section>

<section class="example-section">
  <md-checkbox class="example-margin" [(ngModel)]="showTicks">Show ticks</md-checkbox>
  <md-checkbox class="example-margin" [(ngModel)]="autoTicks" *ngIf="showTicks">
    Auto ticks
  </md-checkbox>
  <md-input-container class="example-margin" *ngIf="showTicks && !autoTicks">
    <input mdInput type="number" placeholder="Tick interval" [(ngModel)]="tickInterval">
  </md-input-container>
</section>

<section class="example-section">
  <md-checkbox class="example-margin" [(ngModel)]="thumbLabel">Show thumb label</md-checkbox>
</section>

<section class="example-section">
  <md-checkbox class="example-margin" [(ngModel)]="vertical">Vertical</md-checkbox>
  <md-checkbox class="example-margin" [(ngModel)]="invert">Inverted</md-checkbox>
</section>

<section class="example-section">
  <md-checkbox class="example-margin" [(ngModel)]="disabled">Disabled</md-checkbox>
</section>

<md-slider class="example-margin"
           [disabled]="disabled"
           [invert]="invert"
           [max]="max"
           [min]="min"
           [step]="step"
           [thumb-label]="thumbLabel"
           [tick-interval]="tickInterval"
           [(ngModel)]="value"
           [vertical]="vertical">
</md-slider>
